<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"

      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <h:outputStylesheet name="common-style.css" library="css" />
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCvQMT2jUvbqqp32py6OeStXM7sVu8ASNg"/>
        <h:outputScript name="geoloc.js" library="js"/>
                        <title> MeteoCal </title>

    </h:head>

    <h:body style="height: 100vh">

        <div id="page">



            <p:layout fullPage="true" >//style="min-width:400px;min-height:200px;position: fixed; top: 50px; left:0;"
                <p:layoutUnit position="north" size="50">
                    <div id="header">
                        <ui:insert name="header" >
                            <ui:include src="/WEB-INF/commonHeader.xhtml" />
                        </ui:insert>
                    </div>
                </p:layoutUnit>
                <p:layoutUnit position="west" size="200">

                    <ui:insert name='leftBar'>
                    </ui:insert>
                </p:layoutUnit>

                <p:layoutUnit position="center">
                    <ui:insert name="content" >
                        <ui:include src="/WEB-INF/commonContent.xhtml" />
                    </ui:insert>
                </p:layoutUnit>
            </p:layout>


        </div>

    </h:body>

</html>